{% load staticfiles %}

<!DOCTYPE html>
<html>
<head>
  <title>
    Process
  </title>
  <script type='text/javascript' src='{% static 'js/inputpri.js' %}'></script>
  <script type='text/javascript' src='{% static 'js/displaypri.js' %}'></script>
  <link rel="stylesheet" href='{% static 'css/demo1.css' %}'>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>


<body style="padding:10px;">
  <div class="panel panel-primary">
      <div class="panel-heading"><h1 style="text-alig
        var text = JSON.strn:center;">
        Priority Process Scheduling
      </h1></div>
  <div class="panel-body">

    <div id="output">
    </div>

    <div class="card" style="height:70px;">
        <div style="width:250px;float:left;text-align:left;">
          Enter arrival time:
          <input style="width:200px;"id="newarrivaltime" class="form-control" type="text" value=""></input>
        </div>
        <div style="width:300px;float:left;text-align:left;">
          Enter burst time:
          <input style="width:200px;float:left;" id="newbursttime" class="form-control" type="text" value=""></input>
        </div>
        <div style="width:300px;float:left;text-align:left;">
          Enter Priority:
          <br>
          <input style="width:200px;float:left;" id="newPriority" class="form-control" type="text" value=""></input>
          <button class="btn btn-success" onclick="addToList()" style="float:left;margin-left:10px;">Add</button>
        </div>
    </div>

    <div style="float:left;">
  <label for="sel1" style="float:left;">Select Algorithm to be used :</label>
  <br>
      <select class="form-control" id="sel1" style="width:400px;">
        <option>Preemptive Priority(PP)</option>
        <option>Non-preemptive Priority(NPP)</option>
      </select>
    </div>
  </div>

    <div class="panel-footer" style="height:50px;">
    	<button style="float:right;" id="sender" class="btn btn-primary">Send the entire data</button>
    </div>
  </div>
  <div class="panel panel-success">
    <div class="panel-heading">
      <h3>
      Gantt chart
    </h3>
    </div>
    <div id="gantth"></div>
    <br><br>
    <div id="outer-div">
  </div>
    <br><br>
</div>
  <div class="panel panel-warning" style="width:50%;float:left;">
  <div class="panel-heading">
  	<h3>Operations Taking Place</h3>
  </div>
  <div id="comments" class="panel-content">
  </div>
</div>
  <div class="panel panel-warning" style="width:50%;float:left;">
  <div class="panel-heading">
  	<h3>Table</h3>
  </div>
  	<div class="panel-content">
	<table id="ptab" class="table table-bordered">
 	<thead>
 	<tr id="thead">
 	<th>PNO.</th>
  <th>Priority</th>
	<th>Arrival time</th>
	<th>Burst time</th>
	<th>Completion time</th>
	<th>Waiting time</th>
	<th>Turn-around time</th>
	</tr>
	<tbody id="ptable">

	</tbody>
	</thead>
	</table>
  	</div>
  	</div>
</body>
</html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
    $('#sender').click(function(){
    var text = JSON.stringify(stuff);
    var alg = JSON.stringify($("#sel1").val().split("(")[1].split(")")[0])
    //console.log(text);
    $.post('/process/gateway/',{value:text, algo:alg}, function(result){
      sequence = result["gantt"];
      a = result["table"]
      avgwt =0;
      avgtat =0;
      for(i=0;i<a.length;++i){
        avgwt += a[i].wt;
        avgtat += a[i].tat;
      }
      total = sequence.length;
      pixel = 0;
      i = 0;
      $('#outer-div,#comments,#ptable,#gantth').empty();
      // $('#thead').append('<th>PNO.</th> <th>Arrival time</th>  <th>Burst time</th>  <th>Completion time</th>  <th>Waiting time</th>  <th>Turn-around time</th>');
      totalTime = sequence[total-1].stop;
      pixel = parseInt(800/totalTime);
      containerWidth = pixel*totalTime + 2;
      $('#outer-div').css('width',containerWidth+'px');
      displayBlock(i);
    });
    });
</script>
